<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@ page contentType='text/html; charset=UTF-8'%>
 
<%@ taglib prefix='s' uri='/struts-tags'%>

<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-ui-1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jqGrid-4.0.0/css/ui.jqgrid.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.css" />' />
<script type='text/javascript' src='<s:url value="/plugins/jquery-ui-1.8.13/js/jquery-ui-1.8.13.custom.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/i18n/grid.locale-es.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/jquery.jqGrid.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.ajaxQueue.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.bgiframe.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.thickbox-compressed.js" />'></script>

<s:if test="#session.user.rol == 'Administrador'">
    <input type='button' id='cSeccion' value='Cambiar Seccion' />
</s:if>
<s:if test="#session.user.rol == 'Profesor'">
    <input type='button' id='aprobar' value='Aprobar/Desaprobar Participante' />
</s:if>
<div id='i-gridContainer'>
    <table id='usuarioGrid'><tr><td/></tr></table>
</div>
<s:form cssClass="p-form" action="exportarpdf">
    <s:submit value="Exportar en pdf" />
</s:form>
<br>
<s:if test="#session.user.rol == 'Administrador'">
    <s:form action="generarCertificado">
        <input type="submit" value="Generar Certificado" id="generarCertificado" disabled="disabled"/>
        <input type="hidden" name="estudianteSeleccionado" />
    </s:form>
    <br>
    <s:form action="generarConstancia">
        <input type="submit" value="Generar Constancia" id="generarConstancia" disabled="disabled"/>
        <input type="hidden" name="estudianteSeleccionado" />
    </s:form>
    <br>
    <s:form action="enviarCertificado">
        <input type="submit" value="Enviar Certificado" id="enviarCertificado" disabled="disabled"/>
        <input type="hidden" name="estudianteSeleccionado" />
    </s:form>
    <br>
    <s:form action="enviarConstancia">
        <input type="submit" value="Enviar Constancia" id="enviarConstancia" disabled="disabled"/>
        <input type="hidden" name="estudianteSeleccionado" />
    </s:form>
</s:if>
<div id='pager'></div>

<script type='text/javascript'>
var w = {
      currentRow: null
    },
    siyno = 'SI:SI;NO:NO';
    secciones = '<%=ActionContext.getContext().getSession().get("opcSecciones")%>',
    categoria = 'Idiomas:Idiomas;Capacitacion profesional:Capacitacion profesional',
    buildSelect = function(options, elem, val){
        var $s = undefined === elem ? $('<select></select>') : $(elem);
        $s.empty();
        $.each(options.split(';'), function(){
            var opt = this.split(':');
            opt[0] = opt[0].replace(/_/g, ':');
            opt[1] = opt[1].replace(/_/g, ':');
            var selected = undefined !== val && opt[0] == val ? ' selected=\'selected\'' : '';
            $s.append('<option value=\'' + opt[0] + '\'' + selected + '>' + opt[1] + '</option>');
        });
        return $s;
    },
    htmlSelect = function(options){
        var $s = buildSelect(options);
        return '<select>' + $s.html() + '</select>';
    }
    formOptions = {
        addCaption: 'Agregar registro de curso',
        editCaption: 'Modificar seccion',
        modal: true,
        recreateForm: true,
        bSubmit: 'Guardar',
        bCancel: 'Cancelar',
        bClose: 'Cerrar',
        saveData: 'Se han modificado datos, desea guardar?',
        bYes: 'Sí',
        bNo: 'No',
        bExit: 'Cancelar',
        errorTextFormat: function(msg){
           msg = jQuery.parseJSON(msg.responseText);
           var r = '<ul class="jq-error-ul">';
           $.each(msg, function(key, val){
               r += '<li><b>' + key + '</b>:' + val + '</li>';
           })
           return r + '</ul>';
        }
    },
    formEditOptions = {},
    formCreateOptions = {};

$.extend(formEditOptions, formOptions, {
    url: '<s:url action="cSeccionCurso" />',
    closeAfterEdit: true
});

$('#cSeccion').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('#usuarioGrid').setColProp('aprobado', {editable:false});
    $('#usuarioGrid').setColProp('seccion', {editable:true});
    $('#usuarioGrid').editGridRow(w.currentRow, formEditOptions);
});

$('#aprobar').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('#usuarioGrid').setColProp('aprobado', {editable:true});
    $('#usuarioGrid').setColProp('seccion', {editable:false});
    $('#usuarioGrid').editGridRow(w.currentRow, formEditOptions);
});


jQuery('#usuarioGrid').jqGrid({  
    url:'<s:url action="listarinscritosCurso" />',
    datatype: 'json',  
    colNames:['Nombre', 'Apellido', 'Cedula','Telefono','Correo','Seccion','Aprobado'],  
    colModel:[  
        {
            name: 'nombre',
            index: 'nombre',
            width:60,
            editable: false
        },
        {
            name: 'apellido',
            index: 'apellido',
            width:60,
            editable: false
        },
        {
            name:'cedula',
            index:'cedula',
            width:80,
            editable: false,
            searchoptions: {
                sopt: ['eq','ne','lt','le','gt','ge']
            }
        },
        {
            name: 'telefono',
            index: 'telefono',
            width: 80,
            editable: false
        },        
        {
            name: 'correo',
            index: 'correo',
            width: 150,
            editable: false
        },
        {
            name: 'seccion',
            index: 'seccion',
            width: 40,
            editable: true,
            edittype: 'select',
            editoptions: {
                value: secciones
            },
            stype: 'select',
            searchoptions: {
                dataUrl: '<s:url action="dummy" />',//No se va a usar, queremos que se llame a buildSelect
                buildSelect: function(){return htmlSelect(secciones)},
                sopt: ['eq','ne']
            }
        },
        {
            name: 'aprobado',
            index: 'aprobado',
            width: 40,
            editable: true,
            edittype: 'select',
            editoptions: {
                value: siyno
            }
        },
        
    ],
    rowNum:20,
    rowList:[10,20,50,100],
    pager: $('#pager'),
    viewrecords: true,
    sortorder: 'desc',
    caption: 'Seccion',
    width:650,
    height: 'auto',
    onSelectRow: function(id){
        $('#aprobar,#cSeccion,#generarCertificado,#generarConstancia,#enviarCertificado,#enviarConstancia').removeAttr('disabled');
        w.currentRow = id;
        $('input[name=estudianteSeleccionado]').val(id);
    },
    onPaging: function(){
        $('#aprobar,#cSeccion,#generarCertificado,#generarConstancia,#enviarCertificado,#enviarConstancia').attr('disabled', true);
        w.currentRow = null;
    }
});
</script>